<template>
  <div>
    <!-- 检索区域 -->
    <el-form ref="query" label-width="80px" :inline="true">
      <el-form-item label="角色名:">
        <el-input v-model="table.search.name" class="wid-250"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
      <el-button type="success" @click="openAddRole">新增</el-button>
    </el-form>
    <!-- 列表数据 -->
    <DataTable ref="dataTable" @buttonEvent="buttonEvent" :columns="table.columns" :apiUrl="table.apiUrl" :search="table.search" :buttonGroup="table.buttonGroup" :width="500"></DataTable>

    <!-- 新增角色 -->
    <addRoleComponent v-if="addRoleVisible" :dialogVisible="addRoleVisible" @closeAddRole="closeAddRole" @successAddRole="handlerSearch"></addRoleComponent>

    <!-- 编辑角色 -->
    <editRoleComponent v-if="editRoleVisible" :roleModel="roleModel" :editdialogVisible="editRoleVisible" @closeEditRole="closeEditRole" @successEditRole="handlerSearch"></editRoleComponent>

    <!-- 菜单权限 -->
    <menuPermissionComponent :roleid="roleid" v-if="menuPermissionVisible" :menuPermissionVisible="menuPermissionVisible" @closeMenu="closeMenuPermission"></menuPermissionComponent>

    <!-- 普通权限 -->
    <nomalPermissionComponent :roleid="roleid" v-if="normalPermissionVisible" :normalPermissionVisible="normalPermissionVisible" @closeNormal="closeNormalPermission"></nomalPermissionComponent>

  </div>
</template>

<script>
import DataTable from "@/components/DataTable.vue";
import addRoleComponent from "../role/add.vue";
import editRoleComponent from "../role/edit.vue";
import menuPermissionComponent from "../role/menuPermission.vue";
import nomalPermissionComponent from "../role/nomalPermission.vue";

export default {
  components: {
    DataTable,
    addRoleComponent,
    editRoleComponent,
    menuPermissionComponent,
    nomalPermissionComponent
  },
  data() {
    return {
      table: {
        columns: [
          {
            title: "角色名",
            key: "name"
          },
          {
            title: "角色描述",
            key: "description"
          },
          {
            title: "创建时间",
            key: "creationtime"
          }
        ],
        apiUrl: "/api/Role/getList",
        search: {
          name: ""
        },
        buttonGroup: [
          {
            name: "编辑",
            type: "success",
            icon: "",
            incident: "openEditRole"
          },
          {
            name: "删除",
            type: "danger",
            icon: "",
            incident: "handleDelete"
          },
          {
            name: "菜单权限分配",
            type: "primary",
            icon: "",
            incident: "openMenuPermission"
          },
          {
            name: "普通权限分配",
            type: "info",
            icon: "",
            incident: "openNormalPermission"
          }
        ]
      },
      addRoleVisible: false,
      editRoleVisible: false,
      menuPermissionVisible: false,
      normalPermissionVisible: false,
      roleModel: {},
      roleid: ""
    };
  },

  created() {},

  mounted() {},
  methods: {
    buttonEvent(incident, index, row) {
      this[incident](index, row);
    },

    //检索
    handlerSearch: function() {
      this.$refs.dataTable.initload();
    },

    //删除
    handleDelete(index, row) {
      this.$confirm(
        "此操作将永久删除角色 " + row.name + ", 是否继续?",
        "提示",
        {
          type: "warning"
        }
      ).then(() => {
        this.$api.post("/api/Role/delete", { roleId: row.id }).then(rsp => {
          if (rsp != false) {
            this.handlerSearch();
          }
        });
      });
    },

    openAddRole: function() {
      this.addRoleVisible = true;
    },

    closeAddRole: function() {
      this.addRoleVisible = false;
    },

    openEditRole: function(index, row) {
      this.editRoleVisible = true;
      this.roleModel = row;
    },

    closeEditRole: function() {
      this.editRoleVisible = false;
    },

    openMenuPermission: function(index, row) {
      this.menuPermissionVisible = true;
      this.roleid = row.id;
    },

    closeMenuPermission: function() {
      this.menuPermissionVisible = false;
    },

    openNormalPermission: function(index, row) {
      this.normalPermissionVisible = true;
      this.roleid = row.id;
    },

    closeNormalPermission: function() {
      this.normalPermissionVisible = false;
    }
  }
};
</script>

